<script setup lang="ts">

import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuTrigger,
  DropdownMenuItem,
  DropdownMenuSeparator
} from "@/components/ui/dropdown-menu";
import {Column} from "@tanstack/vue-table";
import {cn} from '@/lib/utils'
import {Button} from "@/components/ui/button";
import {
  ArrowDownWideNarrowIcon,
  ArrowUpDownIcon,
  ArrowUpWideNarrowIcon,
  EyeOffIcon
} from "lucide-vue-next";

interface DataTableColumnHeaderProps {
  column: Column<Object, any>
  title: string
}

defineProps<DataTableColumnHeaderProps>()
</script>

<script lang="ts">
export default {
  inheritAttrs: false,
}
</script>

<template>
  <div v-if="column.getCanSort()" :class="cn('flex items-center space-x-2', $attrs.class ?? '')">
    <DropdownMenu>
      <DropdownMenuTrigger as-child>
        <Button
            variant="ghost"
            size="sm"
            class="h-8 -ml-3 data-[state=open]:bg-accent"
        >
          <span>{{ title }}</span>
          <ArrowDownWideNarrowIcon v-if="column.getIsSorted() === 'desc'" class="ml-2 h-4 w-4"/>
          <ArrowUpWideNarrowIcon v-else-if="column.getIsSorted() === 'asc'" class="ml-2 h-4 w-4"/>
          <ArrowUpDownIcon class="ml-2 h-4 w-4"/>
        </Button>
      </DropdownMenuTrigger>
      <DropdownMenuContent align="start">
        <DropdownMenuItem @click="column.toggleSorting(false)">
          <ArrowUpWideNarrowIcon class="mr-2 h-3.5 w-3.5 text-muted-foreground/70"/>
          Asc
        </DropdownMenuItem>
        <DropdownMenuItem @click="column.toggleSorting(true)">
          <ArrowDownWideNarrowIcon class="mr-2 h-3.5 w-3.5 text-muted-foreground/70"/>
          Desc
        </DropdownMenuItem>
        <DropdownMenuSeparator/>
        <DropdownMenuItem @click="column.toggleVisibility(false)">
          <EyeOffIcon class="mr-2 h-3.5 w-3.5 text-muted-foreground/70"/>
          Hide
        </DropdownMenuItem>
      </DropdownMenuContent>
    </DropdownMenu>
  </div>

  <div v-else :class="$attrs.class">
    {{ title }}
  </div>
</template>

<style scoped>

</style>
